<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
	<title>AiDex Sharp 快速开发平台-登录页面</title>
	<link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
	<link rel="icon" href="/static/regist/img/favicon.ico">
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<img class="wave" src="/static/regist/img/wave.png">
<div class="container">
	<div class="img">
		<img src="/static/regist/img/bg.svg">
	</div>
	<div class="login-content">
		<form action="/user/regist">
			<img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
			<h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
			<div class="input-div one">
				<div class="i">
					<i class="fas fa-user"></i>
				</div>
				<div class="div">
					<h5 id="name_msg">用户名</h5>
					<input id="name" autofocus name="name" type="text" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5>密码</h5>
					<input id="pass" name="pass" type="password" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5 id="confirm_msg">确认密码</h5>
					<input id="repass" type="password" class="input">
				</div>
			</div>
			<button type="button" id="registerButton" class="btn">注册</button>
		</form>
	</div>
</div>
<script type="text/javascript" src="/static/regist/js/main.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
	layui.use(function () {
		var $ = layui.$;
		$("#name").blur(function () {
			$.ajax({
				url: "/user/checkUserNameUnique",
				type: "post",
				data: {name: $("#name").val()},
				dataType: "text",
				success: function (data) {
					if (data === "true") {
						console.log(data);
						$("#name_msg").html("");
						$("input[type=submit]").attr("disabled", false).css("background-color", "dodgerblue");
					} else {
						$("#name_msg").html("用户名已存在").css("color", "red");
						$("input[type=submit]").attr("disabled", true).css("background-color", "#ccc");
					}
				}
			})
		})
	});
	layui.use(['jquery'], function () {
		var $ = layui.$;
		$("#repass").blur(function () {
			var pass = $("#pass").val();
			var repass = $("#repass").val();
			if (pass === repass) {
				$("#confirm_msg").html("");
				$("input[type=submit]").attr("disabled", true).css("background-color", "dodgerblue");
			} else {
				$("#confirm_msg").html("密码不一致").css("color", "red");
				$("input[type=submit]").attr("disabled", false).css("background-color", "#ccc");
			}
		});
		// 监听密码输入框的变化
		$("#pass").on("input", function () {
			$("#repass").trigger("blur");
		});



		$("#registerButton").click(function (event) {
			event.preventDefault();
			/*var user = {
				name: $("#name").val(),
				pass: $("#pass").val()
			};*/
			$.ajax({
				url: "/user/regist",
				type: "post",
				/*contentType: "application/json", // 设置请求体内容类型为 JSON
				data: JSON.stringify(user), // 将 User 对象转换为 JSON 字符串*/
				data:{name : $("#name").val(),
					pass: $("#pass").val()},
				dataType: "text",
				success: function (data) {
					if (data === "true") {
						console.log(data);
						alert("注册成功");
						window.location.href = "/user/login"; // 重定向到登录页面
					} else {
						$("#name_msg").html("注册失败").css("color", "red");
						$("input[type=submit]").attr("disabled", true).css("background-color", "#ccc");
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					console.error("请求失败: " + textStatus + ", " + errorThrown);
				}
			});
		});



	});
</script>
</body>
</html>
